<template>
	<a id="popover" type="button" tabindex="0" :title="title" data-toggle="popover" role="button" :data-placement="placement"><span class="glyphicon glyphicon-bell" :class="{reddot: content.length > 0}"></span></a>
	<div id="content-template" style="display: none">
		<ul v-if="content.length > 0">
			<li v-for="item in content" v-if="$index < 3">
				<div class="li-left"><a class="title nodc-link-btn" :href="'/Notice/notice.html?md='+item.m_id">{{item.cla_name}}</a></br><span class="text-muted">发布了新测试</span></div>
				<div class="pull-right text-muted">{{item.m_date.substring(0, 10)}}</div>
			</li>
		</ul>
		<p v-else class="no-centent">暂无新通知</p>
	</div>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			placement: {
				type: String,
				default: 'right'
			},
			content: {
				type: Array
			}
		},
		data () {
			return {
				style: {}
			}
		},
		methods: {
			renderContent () {
				var content = document.getElementById('content-template').innerHTML;
				if ($('.popover').length > 0) console.log('exits') 
				$('#popover').popover({
					template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><a class="popover-btn nodc-link-btn">忽略全部</a><div class="popover-footer"><a class="nodc-link-btn" href="/Notice/notice.html">查看全部</a></div></div>',
					content: content,
					html: true
				})
				// 等待popover初始化完成
				$('#popover').on('inserted.bs.popover', () => {
					$('.popover .popover-btn').click(() => {
						this.readAll();
					})
				})
				$('#popover').on('hide.bs.popover', () => {
					$('.popover .popover-btn').unbind();
				})
			},
			readAll: function () {
				// 先进行销毁
				$('#popover').popover('destroy');
				this.$http.post('/message/change').then(function(resp) {
					this.content = [];
				}, function(resp) {
					// error callback
					this.renderContent();
			        this.notice = {type: 0, msg: resp.statusText};
				})
			}
		},
		watch: {
			content () {
				this.renderContent();
			}
		}
	}
	
</script>
<style>
	.popover {
		min-width: 250px;
	}
	.popover-btn {
		position: absolute;
		top: 8px;
		right: 6px;
		font-size: 14px;
	}
	.popover-footer {
		text-align: center;
		background-color: #f7f7f7;
		border-top: 1px solid #ebebeb;
		font-size: 14px;
		padding: 3px 0;
	}
	.popover-content {
		padding: 0;
	}
	.popover-content .no-centent {
		margin: 8px 0;
		text-align: center;
	}
	.popover-content ul {
		list-style-type: none;
		padding: 0;
	}
	.popover-content ul li {
		padding: 8px 10px;
		overflow: hidden;
		border-bottom: 1px solid #ebebeb;
	}
	.popover-content ul li:last-child {
		border-bottom: 0;
	}
	.popover-content ul li .li-left {
		float: left;
	}
	.popover-content ul li .title {
		font-size: 18px;
		color: #2c3e50;
	}
	.popover-content ul li .text-muted {
		font-size: 14px;
	}
</style>